<template>
    <div class="box">
        <div class="list">
            <div v-for="item, index in list" :key="index" class="item" @click="godetail(item.id)">
                <img :src="item.image" alt="">
                <div class="content">
                    <span class="dic">{{item.price}}</span>
                    <span class="dicNum">{{item.dic}}</span>
                    <span class="name">{{item.text}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getData } from "@/request/api/all"
export default ({
    data() {
        return {

        }
    },
    props: {
        list: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        godetail(id) {
            console.log(id);
            this.$router.push({
                name: 'header-detail',
                params: {
                    itemId: id
                }
            });
        }
    }
})
</script>
<style lang="scss">
.box {
    width: 100px;
    margin: 0 auto;

    .list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 230px;

        .item {
            width: 49%;

            img {
                width: 100%;
            }

            .content {
                margin-top: 18px;
                font-weight: bold;
                margin-bottom: 20px;
                text-align: left;
                // 单行省略号
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                .dic {
                    color: #f03867;
                    font-size: 26px;
                }
                .dicNum{
                    font-size: 20px;
                    margin-right: 10px;
                }
                .name{
                    font-size: 20px;
                }
            }
        }
    }
}
</style>